<template>
  <div class="index">
    <!-- 吸顶效果 -->
    <van-sticky>
        <!-- 头部 -->
      <div class="search" >
        <div class="logo">
          <img  class="logoImg" src="../../../public/images/uTools_1637385021625.png" alt="">
        </div>
        <div class="content" @click="search">
          <div class="icon">
            <img class="iconImg" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png" alt="">
          </div>
          <div class="input">搜索商品</div>
        </div>
        <div class="headerlon" v-show="!aaa.name">
          <div class="headerlogin" @click="login">登录</div>
        </div>
      </div>
      <!-- 头部导航栏 -->
      <div class="navhua">
        <!-- 滑动 -->

        <tabs :navList="navList" :changedid="changedid"></tabs>
      </div>
    </van-sticky>
    
    <!-- 图片轮播 -->
      <router-view :homeList="homeList" :navList="navList"></router-view>

      <!-- 底部固定图标 -->
     <div class="flexheader" v-show="gotop"  @click="toTop">
       <img src="//yanxuan-static.nosdn.127.net/hxm/yanxuan-node-wap/style/img/go-1d03abe0594ead4dabcf6bb70fc54966.png" alt="">

     </div>
     <Tabbar></Tabbar>
  </div>
</template>

<script>

import Tabs from './commponents/tabs/tabs.vue'
import {reqGetRecommend,reqGetShopList} from "@/api/api"
import store from '@/store'
export default {
  name: 'Home',
  data(){
    return{
      activeNames:"1",
      homeList:[],
      id:1630131808529,
      categoryId:1005000,
      navList:[],
      gotop:false,
      userInfo:''

    }
  },
  components: {
    Tabs
  },
  
  mounted(){
    
    // 滚动事件
    window.addEventListener("scroll", this.handleScroll, true);

    let add=this.id
    this.gethomeList(add)

    let categoryId=this.categoryId
    this.getNavList(add,categoryId)
    
  },
  methods:{
        changedid(currentId){
        console.log(currentId)
        this.categoryId=currentId
        let add=this.id
        this.getNavList(add,this.categoryId)
      },
      
      handleScroll() {
       let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
        scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
      },
    toTop() {
      
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10)
    },
   

    
    
  

    
    // 首页
    async gethomeList(add){
      const result=await reqGetRecommend(add)
      console.log(result)
      this.homeList=result.data.data
    },
    // 首页导航数据
    async getNavList(add,categoryId){
      const result1 = await reqGetShopList(add,categoryId)
      this.navList=result1
    },
    login(){
      this.$router.push({
        path:"/login?redirect=%2Fadmin"
      })
    },
    search(){
      this.$router.push(
        "/search"
      )
    }
  },
  computed:{
    rad(){
      return localStorage.getItem('userTempId_key')
      
    },
    aaa(){
      let userInfo = store.state.user.userInfo
      return userInfo
    }
  }

  
  
  
  
  
}
</script>

<style lang="less" scoped>
  @import './index.css';
</style>
